@import  url("./common.less");

/**************例如：列表-详情--begin*********************/
.my-list-detail {
	padding: 2rpx;

	// 分割线
	.ml-item-line{
		display: block;
		height: 2rpx;
		width: 100%;
		border: 2rpx solid #efefef;
		position: relative;

		.title{
			position: absolute;
			bottom: 0rpx;
			display: inline-block;
			width: 200rpx;
			left: calc((100% - 200rpx)/2);
		}
	}

	.ml-item {
		margin-bottom: 20rpx;
		background: #fff;
		box-shadow: 0 2rpx 3rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		padding: 20rpx;
		position: relative;
		border-radius: 12rpx;
		line-height: 48rpx;

		// 标题
		.i-row-title{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
			position: relative;
			
			.r-title-tip{
				font-size: 24rpx;
				color: #666;
			}
			
			// 右边
			.right-con{
				position: absolute;
				bottom: 0rpx;
				right: 0rpx;
			}
		}
		
		// 多文本行
		.i-row-text{
			.r-title{// 标题
				display: inline-block;
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #333333;
				color: #000000;
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		// 其他行
		.i-row{
			display: flex;
			
			.r-icon{
				vertical-align: -9rpx;
				margin-right: 10rpx;
			}
			
			.r-it{
				display: inline-block;
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #333333;
				min-width: 50%;
				max-width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.r-unline{
				color: #00C3CE;
				text-decoration: underline;
			}

			.r-title{// 标题
				display: inline-block;
				font-size: 28rpx;
				font-family: PingFang SC;
				color: #333333;
				color: #000000;
				font-size: 28rpx;
				font-weight: 600;
			}

			/* 按钮组 */
			.r-btns {
				height: 60rpx;
				margin-top: 10rpx;
				text-align: right;
				display: block;

				.rb-btn {
					background: #00c3ce; 
					margin: 0 10rpx;
					padding: 0rpx 20rpx !important;

					.am-button-content{
						color: #fff !important;
					}
				}
			}

		}

	}
}

// 如：报账记录详情
.my-obj-detail {
	margin: 10rpx;
	position: relative;
	min-height: 100vh;
	background-color: f3f3f3;
	padding-top: 300rpx;
	
	.mo-top-img{
		position: absolute;
		top: 60rpx;
		left: calc((100% - 150rpx)/2);
		text-align: center;
		
		.img-text{
			margin-top: 20rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #666;
		}
	}
	
	.mo-main{
		background-color: #FFFFFF;
		box-shadow: 0 2rpx 3rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 20rpx;
		line-height: 65rpx;
		
		.mo-row{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.r-title{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			
			.r-con,.r-con-list{
				font-size: 32rpx;
				font-family: PingFang SC;
				color: #333333;
				
			}
			
			.r-con-list{
				line-height: 40rpx;
				
				.r-li{
					display: flex;
					border-bottom: 1rpx solid #f3f3f3;
					
					.li-title{
						font-size: 24rpx;
						color: #666;
						font-weight: 600;
						margin-right: 40rpx;
					}
					
					.li-text{
						font-size: 24rpx;
						color: #333;
					}
				}
			}
		}
	}
}

/**************例如：列表-详情--end***********************/

/**************例如：订单-列表--begin***********************/

.my-list{
	min-height: 100vh;
	padding-top: 20rpx;
	
	.ml-item{
		background: #fff;
		box-shadow: 0 2rpx 3rpx rgba(0, 0, 0, 0.1);
		margin: 0rpx 20rpx 20rpx 20rpx;
		padding: 20rpx 10rpx 14rpx 20rpx;
		line-height: 60rpx;
		border-radius: 12rpx;
		position: relative;
		
		.i-title-row{
			display: flex;
			
			.r-tag{
				color: #fff;
				margin-right: 10rpx;
				padding: 0rpx 10rpx;
				background-color: #00C3CE;
				border-radius: 4rpx;
			}
			
			.r-title{
				flex: 1;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
			
			.r-detail-btn{
				color: #666;
				font-size: 24rpx;
			}
		}
		
		.i-row{
			display: flex;
			position: relative;
			
			.r-title{
				flex: 1;
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
			
			.r-icon{
				margin-right: 8rpx;;
			}
			
			.r-con{
				display: flex;
				
				.tag{
					color: #fff;
					margin-right: 10rpx;
					padding: 0rpx 4rpx;
					background-color: #00C3CE;
					border-radius: 4rpx;
				}
				
				.text{
					flex: 1
				}
			}
			
			.c-btns{
				display: flex;
				position: absolute;
				top: 0rpx;
				right: 0rpx;
			}
		}
	}
}

/**************例如：订单-列表--begin***********************/


/**************例如：请假-列表--begin***********************/
.my-list2{
	background: #efefef;
	min-height: 100vh;
	padding-top: 20rpx;

	.ml-item{
		background: #fff;
		box-shadow: 0 2rpx 3rpx rgba(0, 0, 0, 0.1);
		margin: 0rpx 20rpx 20rpx 20rpx;
		padding: 20rpx 10rpx 14rpx 20rpx;
		line-height: 60rpx;
		border-radius: 12rpx;
		position: relative;

		// 标题
		.i-title{
			display: flex;
			margin-bottom: 10rpx;

			// 左边
			view:first-child{
				flex: 1;
				font-size: 36rpx;
				font-family: @font;
				font-weight: 600;
				color: #000000;
				
				.tip-icon{
					display: inline-block;
					width: 4rpx;
					height: 50%;
					background-color: #ffa400;
					vertical-align: -4rpx;
					margin-right: 10rpx;
				}
			}

			// 右边
			view:last-child{
				margin-right: 0;
				font-size: 26rpx;
				color: #666;
			}
		}

		// 一般行
		.i-row{
			font-size: 30rpx;
			font-family: @font;
			color: #000000;
			padding-left: 16rpx;
		}

		// 底部文本
		.i-footer{
			display: flex;

			// 左边
			view:first-child{
				flex: 1;
				font-size: 26rpx;
				font-family: @font;
				font-weight: 600;
				color: #666666;
				padding-left: 16rpx;
			}

			// 右边
			view:last-child{
				margin-right: 0;
				font-size: 32rpx;
				color: #ffa400;
				padding-right:20rpx;
			}
		}

		// 按钮区域
		.i-btns{
			display: flex;
			margin-top: 20rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;

			.btn{
				padding: 0rpx 20rpx;
				margin: 0 10rpx;
				border-radius: 40rpx;
				border: 2rpx solid #ccc;
				font-size: 26rpx;
				text-align: center;
				color: #666666;
			}
		  
			.ok{
				background-color: #00C3CE;
				color: #FFFFFF !important;
				border: none;
			}
		}
	}

	// 详情
	.ml-item-detail{
		background: #fff;
		box-shadow: 0 2rpx 3rpx rgba(0, 0, 0, 0.1);
		margin: 0rpx 20rpx 20rpx 20rpx;
		padding: 20rpx 10rpx 14rpx 20rpx;
		line-height: 60rpx;
		border-radius: 12rpx;
		position: relative;

		// 标题
		.i-title{
			display: flex;
			margin-bottom: 10rpx;

			// 左边
			view:first-child{
				flex: 1;
				font-size: 36rpx;
				font-family: @font;
				font-weight: 600;
				color: #333;
				
				.tip-icon{
					display: inline-block;
					width: 4rpx;
					height: 50%;
					background-color: #ffa400;
					vertical-align: -4rpx;
					margin-right: 10rpx;
				}
			}

			// 右边
			view:last-child{
				margin-right: 0;
				font-size: 32rpx;
				color: #ffa400;
			}
		}

		// 一般行
		.i-row{
			font-size: 30rpx;
			font-family: @font;
			color: #333;
			padding-left: 16rpx;
		}

		// 底部文本
		.i-footer{
			display: flex;

			// 左边
			view:first-child{
				flex: 1;
				font-size: 26rpx;
				font-family: @font;
				font-weight: 600;
				color: #666666;
				padding-left: 16rpx;
			}
		}

		// 按钮区域
		.i-btns{
			display: flex;
			margin-top: 20rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;
			
			.btn{
				padding: 0rpx 20rpx;
				margin: 0 10rpx;
				border-radius: 40rpx;
				border: 2rpx solid #ccc;
				font-size: 26rpx;
				text-align: center;
				color: #666666;
			}
					  
			.ok{
				background-color: #00C3CE;
				color: #FFFFFF !important;
				border: none;
			}
		}
	}

}
/**************例如：请假-列表--end***********************/